@charset "UTF-8";
//-----------------------------------------------------	
// flip scss
//-----------------------------------------------------


// flip
@mixin animate-flip () {
  @include keyframes(flip){
    0% {
      @include transform(perspective(400px) translateZ(0) rotateY(0) scale(1));
    }
    40% {
      @include transform(perspective(400px) translateZ(150px) rotateY(170deg) scale(1));
    }
    50% {
      @include transform(perspective(400px) translateZ(150px) rotateY(190deg) scale(1));
    }
    80% {
      @include transform(perspective(400px) translateZ(0) rotateY(360deg) scale(.95));
    }
    100% {
      @include transform(perspective(400px) translateZ(0) rotateY(360deg) scale(1));
    }
  }
  .flip {
    @include animation-name(flip);
    @include backface-visibility(visible);
    @include animation-timing-function(ease-out);
    @extend %animated;
  }
}

// flipInX
@mixin animate-flipInX () {
  @include keyframes(flipInX){
    0% {
      @include transform(perspective(400px) rotateX(90deg));
      opacity: 0;
    }
    40% {
      @include transform(perspective(400px) rotateX(-10deg));
    }
    70% {
      @include transform(perspective(400px) rotateX(10deg));
    }
    100% {
      @include transform(perspective(400px) rotateX(0deg));
      opacity: 1;
    }
  }
  .flipInX {
    @include animation-name(flipInX);
    @include backface-visibility(visible);
    @extend %animated;
  }
}

// flipInY
@mixin animate-flipInY () {
  @include keyframes(flipInY){
    0% {
      @include transform(perspective(400px) rotateY(90deg));
      opacity: 0;
    }
    40% {
      @include transform(perspective(400px) rotateY(-10deg));
    }
    70% {
      @include transform(perspective(400px) rotateY(10deg));
    }
    100% {
      @include transform(perspective(400px) rotateY(0deg));
      opacity: 1;
    }
  }
  .flipInY {
    @include animation-name(flipInY);
    @include backface-visibility(visible);
    @extend %animated;
  }
}

// flipOutX
@mixin animate-flipOutX () {
  @include keyframes(flipOutX){
    0% {
      @include transform(perspective(400px) rotateX(0deg));
      opacity: 1;
    }
    100% {
      @include transform(perspective(400px) rotateX(90deg));
      opacity: 0;
    }
  }
  .flipOutX {
    @include animation-name(flipOutX);
    @include backface-visibility(visible);
    @extend %animated;
  }
}

// flipOutY
@mixin animate-flipOutY () {
  @include keyframes(flipOutY){
    0% {
      @include transform(perspective(400px) rotateY(0deg));
      opacity: 1;
    }
    100% {
      @include transform(perspective(400px) rotateY(90deg));
      opacity: 0;
    }
  }
  .flipOutY {
    @include animation-name(flipOutY);
    @include backface-visibility(visible);
    @extend %animated;
  }
}